<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <title>城市合伙人</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/m-global.css">
</head>

<body>

  <div class="layui-fluid">
    <div class="layui-card">
      <form action="" class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-row layui-col-space10 layui-form-item">

          <div class="layui-col-lg3 layui-col-md6">
            <label for="" class="layui-form-label">用户id</label>
            <div class="layui-input-block">
              <input type="text" name="user_id" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-col-lg3 layui-col-md6">
            <label for="" class="layui-form-label">昵称</label>
            <div class="layui-input-block">
              <input type="text" name="nickname" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-col-lg3 layui-col-md6">
            <label for="" class="layui-form-label">手机</label>
            <div class="layui-input-block">
              <input type="tel" name="mobile" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-col-lg3 layui-col-md6">
            <label for="" class="layui-form-label layui-form-label--lg">注册时间范围</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" name="" placeholder="请选择" autocomplete="off" id="createdTime">
              <input type="hidden" class="js-time-start" name="start_time">
              <input type="hidden" class="js-time-end" name="end_time">
            </div>
          </div>
          <div class="layui-col-lg3 layui-col-md6">
            <label for="" class="layui-form-label layui-form-label--lg">开通城市合伙人时间</label>
            <div class="layui-input-block">
              <input type="text" class="layui-input" name="" placeholder="请选择" autocomplete="off" id="cityTime">
              <input type="hidden" class="js-time-start" name="city_start_time">
              <input type="hidden" class="js-time-end" name="city_end_time">
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn js-table-search" lay-submit lay-filter="js-btn-table-search">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
      <div class="layui-card-body">
        <table id="js-income" lay-filter="js-income"></table>
        <script type="text/html" id="tableToolBar">
          <!-- <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> -->
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
      </div>
    </div>
  </div>

  <script src="../../layuiadmin/layui/layui.js"></script>
  <script>
    layui.config({
      base: '../../layuiadmin/' //静态资源所在路径
    }).extend({
      index: 'lib/index', //主入口模块
      utils: "m-utils"
    }).use(['index', 'table', 'layer', 'jquery', 'utils', 'form', 'element'], function () {
      var $ = layui.$,
        layer = layui.layer,
        form = layui.form,
        table = layui.table,
        utils = layui.utils,
        form = layui.form,
        element = layui.element;
      // utils.hello();
      utils.laydate('#createdTime');
      utils.laydate('#cityTime');
      $('body').on('click', '.js-show-img', function () {
        var $this = $(this);
        utils.showImg($this, 'nickname')
      });

      // 收益流水
      // table 字段设置
      utils.setTableOption('tablelist', 'post');
      // table排序
      table.on('sort(tableData)', function (obj) {
        console.log({
          field: obj.field,
          type: obj.type
        });
        table.reload('tableData', {
          initSort: obj,
          where: {
            order_by: obj.field + ' ' + obj.type
          }
        })
      });
      // table数据
      var tableData = table.render({
        elem: '#js-income',
        height: 'full-270',
        url: 'https://easy-mock.com/mock/5b0cac0df1440f14dcb5d2ba/smilemall/user_management/city',
        page: true,
        cellMinWidth: 100,

        cols: [
          [{
              field: 'user_id',
              title: '用户ID',
              width: 180
            },
            {
              field: 'avatar',
              title: '头像',
              width: 90,
              templet: function (d) {
                return `<div class="js-show-img"><img src="${d.avatar}"/></div>`
              }
            },
            {
              field: 'nickname',
              title: '昵称'
            },
            {
              field: 'mobile',
              title: '手机',
              width: 120
            },
            {
              field: 'invitation_code',
              title: '邀请码',
              width: 180
            },
            {
              field: 'created_time',
              title: '创建时间',
              width: 180,
              templet: function (d) {
                var timestamp = new Date(d.created_time * 1000);
                return utils.formatTime(timestamp);
              }
            },
            {
              field: 'city_time',
              title: '开通城市合伙人时间',
              width: 180,
            },
            {
              title: '操作',
              fixed: 'right',
              width: 130,
              align: 'center',
              toolbar: '#tableToolBar'
            }
          ]
        ],
        done: function (res) {
          console.log('table数据：', res);
        },
      });
      // 监听工具条
      table.on('tool(js-income)', function (obj) {
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        if (layEvent === 'detail') { //查看
          //do somehing
        } else if (layEvent === 'del') { //删除
          layer.confirm('真的删除行么', function (index) {
            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
            //向服务端发送删除指令
          });
        } else if (layEvent === 'edit') { //编辑
          //do something

          //同步更新缓存对应的值
          obj.update({
            username: '123',
            title: 'xxx'
          });
        }
      });
      //监听搜索
      form.on('submit(js-btn-table-search)', function (data) {
        var field = data.field;
        //table执行重载
        tableData.reload('js-income', {
          where: field
        });
        return false;
      });

    });
  </script>
</body>

</html>